<template>
  <div>
    <div id="piechart"></div>
  </div>
</template>

<script>
export default {
  name: 'Vuepro2209Pie',
  props:{
    title:{
      type:String,
      default:""
    },
    pieData:{
      type:String,
      default(){
        return []
      }
    }
  },
  watch:{
    pieData:{//传来了新的图表数据
      handler(newVal){
          this.makePie()
      },
      deep:true
    }
  },
  data() {
    return {
      
    };
  },
  created(){
    this.$nextTick(()=>{
      this.makePie()
    })
  },
  mounted() {
    
  },

  methods: {
    makePie(){
        let chart=this.$echarts.init(document.getElementById("piechart"))
        let option = {
            title: {
              text: this.title,
              subtext: 'Fake Data',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: this.pieData,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };

            chart.setOption(option)
    }
  },
};
</script>
<style lang="less">
    #piechart{
      width:500px;
      height:500px;
      background:skyblue;
    }
</style>